<template>
  <div class="widgets-breadcrumb">
    <el-breadcrumb separator-icon="ArrowRight">
      <transition-group name="breadcrumb">
        <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path">
          <div
            class="breadcrumb-item"
            :class="{
              'breadcrumb-current': index === breadcrumbList.length - 1,
              'breadcrumb-skip': index !== breadcrumbList.length - 1 && (item.meta.type !== 'directory' || item.redirect),
            }"
            @click="skipRoute(item)"
          >
            <i v-if="isBreadcrumbIcon && item.meta.icon" :class="item.meta.icon" class="mr-6"></i>
            <span>{{ item.meta.title }}</span>
          </div>
        </el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>
  </div>
</template>

<script setup>
import { useBreadcrum } from '@/hooks/useBreadcrum'
import { useThemeStore } from '@/stores/theme'
import { storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

const themeStore = useThemeStore()
const { isBreadcrumbIcon } = storeToRefs(themeStore)

const breadcrumbList = computed(() => {
  const breadcrumbs = useBreadcrum(route)
  return breadcrumbs
})

function skipRoute(item) {
  // 当前路由或无重定向的目录，则无需跳转
  if (item.path === route.path || (item.meta.type == 'directory' && !item.redirect)) return
  router.push(item.path)
}
</script>

<style lang="scss" scoped>
.widgets-breadcrumb {
  .breadcrumb-item {
    opacity: 0.8;
    color: var(--text-color);

    &.breadcrumb-current {
      opacity: 1;
    }

    &.breadcrumb-skip {
      cursor: pointer;

      &:hover {
        opacity: 1;
        color: var(--color-primary);
      }
    }
  }
}

.breadcrumb-enter-active {
  transition: all 0.2s;
}
.breadcrumb-enter-from,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(10px);
}
</style>
